<template>
  <div style="height:100%">
    <div id="docComment">
      <header>
        <i @click="goBack()"></i>
        <div>评价</div>
      </header>
      <div class="all">
        <div class="top">
          <div style="text-align: center;"><img src="../../../image/clinicPic.png" alt="" style="margin: 10px 0px 0px;"></div>
          <div class="name">{{clinicName}}</div>
          <div style="margin:15px 0px 20px 14px;">
            <img src="../../../image/clinicgrade.png" alt="">
            为诊室评分：
            <el-rate v-model="commentObj.grade" text-color="#ff9900" score-template="{value}" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              :disabled="iscomment" @change="rate(commentObj.grade)">
            </el-rate>
          </div>
          <div>
            <img src="../../../image/bj.png" alt="" style="margin-left: 19px;">
            选择补充说明
            <ul>
              <li ref="listArr" v-for="(item,index) in docComment" v-if="commentObj.grade!=5" :class="item.bgc" :key="index">
                <input type="checkbox" :id="index" v-model="ischeckbox" :value="item.id">
                {{item.value}}
              </li>
              <li ref="listArr" v-for="(item,index) in docComment0" v-if="commentObj.grade==5" :class="item.bgc" :key="index">
                <input type="checkbox" :id="index" v-model="ischeckbox" :value="item.id">
                {{item.value}}
              </li>
            </ul>

          </div>
          <div style="margin:15px 0px 20px 14px;">
            <img src="../../../image/clinicgrade.png" alt="">
            为护士评分：
            <el-rate v-model="commentObj.grade1" text-color="#ff9900" score-template="{value}" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              :disabled="iscomment" @change="rate1(commentObj.grade1)">
            </el-rate>
          </div>
          <div>
            <img src="../../../image/bj.png" alt="" style="margin-left: 19px;">
            选择补充说明
            <ul>
              <li ref="listArr" v-for="(item,index) in docComment1" v-if="commentObj.grade1!=5" :class="item.bgc" :key="index">
                <input type="checkbox" :id="index" v-model="ischeckbox1" :value="item.id">
                {{item.value}}
              </li>

              <li ref="listArr" v-for="(item,index) in docComment2" v-if="commentObj.grade1==5" :class="item.bgc" :key="index">
                <input type="checkbox" :id="index" v-model="ischeckbox1" :value="item.id">
                {{item.value}}
              </li>
            </ul>

          </div>
        </div>
        <div class="bottom">
          <img src="../../../image/bj.png" alt="">
          <textarea name="" id="" cols="30" rows="10" placeholder="写下对诊室的评价吧" v-model="commentObj.content"></textarea>
        </div>

        <footer>
          <a @click='subComment' v-show="!iscomment">提 交</a>
        </footer>
      </div>

    </div>
  </div>


</template>
<script>
  export default {
    data() {
      return {
        clinicName: '',
        ischeckbox: [],
        ischeckbox1: [],
        docComment: [{
          id: '1',
          value: '服务流程有疏漏',
          bgc: 'white'
        }, {
          id: '2',
          value: '诊室打扫不到位',
          bgc: 'white'
        }, {
          id: '3',
          value: '服务态度一般',
          bgc: 'white'
        }, {
          id: '4',
          value: '诊室温度不适',
          bgc: 'white'
        }, {
          id: '5',
          value: '诊室有异味',
          bgc: 'white'
        }, {
          id: '6',
          value: '索要好评',
          bgc: 'white'
        }, {
          id: '7',
          value: '未能及时迎送',
          bgc: 'white'
        }, {
          id: '8',
          value: '工作纪律散漫',
          bgc: 'white'
        }],
        docComment0: [{
          id: '1',
          value: '服务流程周到',
          bgc: 'white'
        }, {
          id: '2',
          value: '诊室整洁',
          bgc: 'white'
        }, {
          id: '3',
          value: '服务态度亲切',
          bgc: 'white'
        }, {
          id: '4',
          value: '诊室温度舒适',
          bgc: 'white'
        }, {
          id: '5',
          value: '诊室无异味',
          bgc: 'white'
        }, {
          id: '6',
          value: '门口迎送',
          bgc: 'white'
        }], //诊室5星
        docComment1: [{
          id: '1',
          value: '专业不熟练',
          bgc: 'white1'
        }, {
          id: '2',
          value: '服务态度一般',
          bgc: 'white1'
        }, {
          id: '3',
          value: '病历记录不准确',
          bgc: 'white1'
        }, {
          id: '4',
          value: '形象邋遢',
          bgc: 'white1'
        }, {
          id: '5',
          value: '词不达意',
          bgc: 'white1'
        }, {
          id: '6',
          value: '做事拖沓',
          bgc: 'white1'
        }], //护士5星
        docComment2: [{
          id: '1',
          value: '服务笑容亲切',
          bgc: 'white1'
        }, {
          id: '2',
          value: '专业素养高',
          bgc: 'white1'
        }, {
          id: '3',
          value: '病历记录清晰',
          bgc: 'white1'
        }, {
          id: '4',
          value: '形象得体',
          bgc: 'white1'
        }, {
          id: '5',
          value: '沟通流畅',
          bgc: 'white1'
        }, {
          id: '6',
          value: '勤快麻利',
          bgc: 'white1'
        }], //护士5星
        fruitIds: ['1', '3', '4'],
        iscomment: false, //是否评价过 默认否
        commentObj: {
          clinicid: '',
          order_num: '', //评价的订单号
          explanation: [], //诊室补充
          explanation_index: [],
          explanation1: [], //护士补充
          explanation1_index: [],
          doctorid: '', //医生id
          content: '', //回复评价内容
          grade: 4, //评价星级    
          grade1: 4, //评价星级    
        },
      }
    },


    updated() {
      if (this.commentObj.grade == 5) {
        this.docComment0.forEach(element => {
          if (this.ischeckbox.includes(element.id)) {
            this.$set(element, "bgc", 'green')
          } else {
            this.$set(element, "bgc", 'white')
          }
        })
      } else {
        this.docComment.forEach(element => {
          if (this.ischeckbox.includes(element.id)) {
            this.$set(element, "bgc", 'green')
          } else {
            this.$set(element, "bgc", 'white')
          }
        })
      }

      if (this.commentObj.grade1 == 5) {
        this.docComment2.forEach(element => {
          if (this.ischeckbox1.includes(element.id)) {
            this.$set(element, "bgc", 'green1')
          } else {
            this.$set(element, "bgc", 'white1')
          }
        })
      } else {
        this.docComment1.forEach(element => {
          if (this.ischeckbox1.includes(element.id)) {
            this.$set(element, "bgc", 'green1')
          } else {
            this.$set(element, "bgc", 'white1')
          }
        })
      }
    },
    methods: {
      //返回上一级
      goBack() {
        this.$router.back();
      },
      rate() {
          this.ischeckbox=[]
      },
      rate1() {
        this.ischeckbox1=[]
      },
      init() {
        if (this.$route.query.clinicid) {
          this.commentObj.clinicid = this.$route.query.clinicid;
        }
        if (this.$route.query.order_num) {
          this.commentObj.order_num = this.$route.query.order_num;
        }
        if (localStorage.getItem("loginMobile")) {
          this.commentObj.doctorid = localStorage.getItem("loginMobile");
        }
        //判断是否已经评价过
        this.$api.get(this.$api.baseURLSchool, "selectdata2/doctor_comment?order_num=" + this.commentObj.order_num, {},
          r => {
            if (r.data.ret == 1) {
              if (r.data.info.length > 0) {
                this.iscomment = true;
                this.commentObj = r.data.info[0];
                this.commentObj.content = r.data.info[0].content
                this.commentObj.grade = parseInt(r.data.info[0].grade);
                this.commentObj.grade1 = parseInt(r.data.info[0].grade1);
                var length = JSON.parse(r.data.info[0].explanation);
                var length1 = JSON.parse(r.data.info[0].explanation1);
                for (var i = 0; i < length.length; i++) {
                  $('.white').eq(length[i].id-1).addClass('green')
                }
                for (var i = 0; i < length1.length; i++) {
                  $('.white1').eq(length1[i].id-1).addClass('green1')
                }
              }
            }
          }, err => {
            console.log(err);
          })
      },


      subComment() {
        let arr = []
        let arr1 = []
        if (this.commentObj.grade == 5) {
          this.docComment0.forEach(element => {
            if (this.ischeckbox.includes(element.id)) {
              arr.push(element)
            }
          })
        } else {
          this.docComment.forEach(element => {
            if (this.ischeckbox.includes(element.id)) {
              arr.push(element)
            }
          })
        }

        if (this.commentObj.grade1 == 5) {
          this.docComment2.forEach(element => {
            if (this.ischeckbox1.includes(element.id)) {
              arr1.push(element)
            }
          })
        } else {
          this.docComment1.forEach(element => {
            if (this.ischeckbox1.includes(element.id)) {
              arr1.push(element)
            }
          })
        }
        this.commentObj.clinicid = this.$route.query.clinicid;
        this.commentObj.doctorid = localStorage.getItem("loginMobile");
        this.commentObj.explanation = JSON.stringify(arr)
        this.commentObj.explanation1 = JSON.stringify(arr1)
        console.log(this.commentObj)
        if (this.commentObj.grade && this.commentObj.content) {
          this.commentObj.content = this.commentObj.content;
          this.$api.post(this.$api.baseURLSchool, "updatedata/doctor_comment/add", this.commentObj, r => {
            if (r.data.ret == 1) {
              this.$utils._toast("评价成功");

              this.init();
            }
          }, err => {
            console.log(err);
          })
        } else {
          this.$utils._toast("评价不可为空");
        }
      }
    },
    created() {
      this.clinicName = this.$route.query.clinicName
      this.init();
    }
  }

</script>
<style lang="scss" scoped>
  :disabled {
    background: #fff;
  }

  .ul {
    position: absolute;
    left: 47%;

    li {
      float: left;
      width: 25px;
      text-align: center;
      display: none;
    }
  }

</style>
